<template>
  <div class="sep">
     <span>-</span>
     <span>{{num}}</span>
     <span @click="add">+</span>
  </div>
  <!-- <div>
    fghjkl
  </div> -->
  <!-- 在vue3中不强调 必须有根节点-->
</template>

<script>
import {ref,reactive,toRefs} from 'vue' 
export default {
props:{
  num: [Number,String]
},
setup(props,ctx){
  const i = ref(props.num);
  const add = () => {
    //  console.log(props);
    //  console.log(ctx);
    i.value++;
    ctx.emit('update:num',i.value);
  }
  return {
    add
  }
}
};
</script>
<style lang="scss" scoped>
.sep{
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 300px;
}
</style>